import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class BrightnessProgressBar extends StatefulWidget {
  const BrightnessProgressBar(
      {super.key, required this.valueChanged, required this.value});
  final double value;
  final ValueChanged<double> valueChanged;
  @override
  State<BrightnessProgressBar> createState() => _BrightnessProgressBarState();
}

class _BrightnessProgressBarState extends State<BrightnessProgressBar> {
  late double _progress = widget.value; // 进度值

  late Offset _thumbPosition;

  get child => null;

  @override
  void initState() {
    _getThumbPosition();
    super.initState();
  }

  @override
  void didUpdateWidget(covariant BrightnessProgressBar oldWidget) {
    _progress = widget.value;
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        IgnorePointer(
          child: SizedBox(
            width: 1.sw,
            height: 1.sw + 70.r,
            child: CustomPaint(
              painter: ProgressBarPainter(_progress),
              size: Size(1.sw, 1.sw),
            ),
          ),
        ),
        Positioned(
            left: 25.r,
            bottom: 0,
            child: ClipPath(
              clipper: BrightnessProgressBarArcClipper(),
              child: GestureDetector(
                onPanUpdate: (details) {
                  // 监听手势滑动事件更新进度值
                  setState(() {
                    _progress += details.delta.dx / (1.sw - 50.r - 42.r);
                    if (_progress < 0) _progress = 0;
                    if (_progress > 1) _progress = 1;
                    _getThumbPosition();
                    widget.valueChanged(_progress);
                  });
                },
                child: Container(
                  color: Colors.transparent,
                  width: 1.sw - 50.r,
                  height: 110.r,
                ),
              ),
            )),
        Positioned(
            left: _thumbPosition.dx + 1.sw / 2 - 25.r,
            top: _thumbPosition.dy + 1.sw / 2 + 10.r,
            child: IgnorePointer(
              child: Container(
                width: 50.r,
                height: 50.r,
                decoration: BoxDecoration(
                    border: Border.all(
                        width: 4.r, color: const Color.fromRGBO(28, 28, 28, 1)),
                    borderRadius: BorderRadius.circular(25.r)),
                child: Container(
                  alignment: Alignment.center,
                  width: 46.r,
                  height: 46.r,
                  decoration: BoxDecoration(
                      color: const Color.fromRGBO(28, 28, 28, 1),
                      borderRadius: BorderRadius.circular(21.r),
                      border: Border.all(
                          width: 4.r,
                          color: const Color.fromRGBO(255, 255, 255, 0.85))),
                  child: Text(
                    '${(_progress * 100).round()}',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        color: const Color.fromRGBO(255, 255, 255, 0.85),
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w600),
                  ),
                ),
              ),
            )),
      ],
    );
  }

  // 根据滑动进度_progress计算角度以及进度条位置
  _getThumbPosition() {
    double angleInDegrees = 225 + _progress * 90; // 角度（以度为单位）
    double radius = 1.sw / 2; // 半径

    double angleInRadians = angleInDegrees * (-pi / 180.0);
    Offset offset = Offset.fromDirection(angleInRadians, radius.r);
    _thumbPosition = offset;
  }
}

class ProgressBarPainter extends CustomPainter {
  final double progress;

  ProgressBarPainter(this.progress);

  @override
  void paint(Canvas canvas, Size size) {
    Paint backgroundPaint = Paint()
      ..color = const Color.fromRGBO(69, 69, 69, 0.9)
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 4;

    Paint foregroundPaint = Paint()
      ..color = const Color.fromRGBO(255, 255, 255, 0.85)
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 4;

    double startAngle = pi * (-225) / 180;
    double sweepAngle = -pi / 2 * progress;

    canvas.drawArc(
        Rect.fromCircle(
            center: Offset(size.width / 2, size.height / 2),
            radius: size.width / 2),
        startAngle,
        -pi / 2,
        false,
        backgroundPaint);

    canvas.drawArc(
        Rect.fromCircle(
            center: Offset(size.width / 2, size.height / 2),
            radius: size.width / 2),
        startAngle,
        sweepAngle,
        false,
        foregroundPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

// 自定义绘制路径 切割出一个带弧形的contaner用于限制手势范围
class BrightnessProgressBarArcClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    final radius = (1.sw - 50.r - 100.r) / 2.0;
    path.moveTo(0, 0);
    path.lineTo(50.r, 0);
    path.arcToPoint(Offset(size.width - 50.r, -240.r),
        clockwise: false, radius: Radius.circular(radius));
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    return path;
  }

  @override
  bool shouldReclip(BrightnessProgressBarArcClipper oldClipper) => true;
}
